<template>
    <el-card shadow="hover" class="question-nav">
      <!-- 分类导航模块 -->
      <div v-for="(group, type) in groupedQuestions" :key="type" class="category-group">
        <div class="category-header">
          <el-tag :type="getCategoryTagType(type)" >
            {{ type }} ({{ group.length }}题)
          </el-tag>
        </div>
        
        <div class="category-items">
          <el-tag
            v-for="q in group"
            :key="q.id"
            :type="getQuestionTagType(q.id)"
            class="nav-item"
            @click="jumpToQuestion(q.id)"
          >
            {{ q.id }}
            <el-icon v-if="isCurrentQuestion(q.id)" class="current-icon">
              <CaretRight />
            </el-icon>
          </el-tag>
        </div>
      </div>
    </el-card>
  </template>
  
  <script lang="ts" setup>
  import { computed } from 'vue'
  import { CaretRight } from '@element-plus/icons-vue'
  
  interface Question {
    id: number
    type: '单选题' | '多选题' | '判断题' | '简答题' | '编程题' | '算法题'
    content: string
    options: string[]
    score: number
    maxLength?: number   // 简答题专用
    initialCode?: string // 编程题专用
    language?: string    // 编程题专用
  }
  
  const props = defineProps<{
    questions: Question[]
    currentQuestion: number
    answers: Record<number, any>
  }>()
  
  // 按类型分组题目
  const groupedQuestions = computed(() => {
    const groups: Record<string, Question[]> = {
      '单选题': [],
      '多选题': [],
      '判断题': [],
      '简答题': [],
      '编程题': [],
      '算法题': []
    }
    
    props.questions.forEach(q => {
      if (groups[q.type]) {
        groups[q.type].push(q)
      }
    })
    
    return groups
  })
  
  // 分类标签样式
  const getCategoryTagType = (type: string) => {
    const typeMap: Record<string, string> = {
      '单选题': '',
      '多选题': 'info',
      '判断题': 'success',
      '简答题': 'warning',
      '编程题': 'danger',
      '算法题': 'danger'
    }
    return typeMap[type] || ''
  }
  
  // 题目标签样式
  const getQuestionTagType = (id: number) => {
    if (id === props.currentQuestion) return 'primary'
    return props.answers[id] ? 'success' : 'info'
  }
  
  // 当前题目标记
  const isCurrentQuestion = (id: number) => {
    return id === props.currentQuestion
  }
  
  // 跳转题目
  const jumpToQuestion = (id: number) => {
    emit('jump', id)
  }
  </script>
  
  <style lang="scss" scoped>
  .question-nav {
    :deep(.el-card__body) {
      padding: 12px;
    }
  
    .category-group {
      margin-bottom: 16px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    .category-header {
      margin-bottom: 8px;
      
      .el-tag {
        font-size: 13px;
        padding: 0 10px;
        height: 28px;
        line-height: 28px;
      }
    }
  
    .category-items {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
      gap: 8px;
      margin-left: 8px;
    }
  
    .nav-item {
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  
      &:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
  
      .current-icon {
        position: absolute;
        right: -4px;
        bottom: -4px;
        font-size: 12px;
        color: var(--el-color-primary);
        background: white;
        border-radius: 50%;
      }
    }
  
    // 不同类型颜色标识
    .el-tag {
      &--success {
        background-color: var(--el-color-success-light-9);
        border-color: var(--el-color-success-light-7);
      }
      
      &--info {
        background-color: var(--el-color-info-light-9);
        border-color: var(--el-color-info-light-7);
      }
      
      &--warning {
        background-color: var(--el-color-warning-light-9);
        border-color: var(--el-color-warning-light-7);
      }
      
      &--danger {
        background-color: var(--el-color-danger-light-9);
        border-color: var(--el-color-danger-light-7);
      }
    }
  }
  
  @media (max-width: 768px) {
    .question-nav {
      .category-items {
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
        gap: 6px;
      }
      
      .nav-item {
        height: 32px;
        padding: 0 8px;
      }
    }
  }
  </style>